<template>
  <div class="app-container">
      <!--查询表单-->
    <div class="search-div">
      <el-form label-width="70px" size="small" v-model="searchForm">
        <!-- 第一行 -->
         <el-row>
           <el-col :span="8">
             <el-form-item label="岗位名称">
                <el-input v-model="searchForm.name" placeholder="岗位名称"></el-input>
             </el-form-item>
           </el-col>

           <el-col :span="8">
             <el-form-item label="岗位编码" style="margin-left: 15px;">
                <el-input v-model="searchForm.postCode" placeholder="岗位编码"></el-input>
             </el-form-item>
           </el-col>

           <el-col :span="8">
             <el-form-item label="状态">
                <el-select v-model="searchForm.status" placeholder="状态">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
             </el-form-item>
           </el-col>
         </el-row>

         <!-- 第二行 -->
         <el-row style="display: flex;">
            <el-button type="primary" icon="el-icon-search" size="mini"  @click="showList()">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetData()">重置</el-button>
         </el-row>
      </el-form>
    </div>

    <!-- 工具条 -->
    <div class="tools-div">
        <el-button type="success" icon="el-icon-plus" size="mini" @click="addPost()" :disabled="$hasBP('bnt.sysPost.add')  === false">添 加</el-button>
    </div>

    <!-- 列表 -->
    <el-table
        v-loading="listLoading"
        :data="postList"
        stripe
        border
        style="width: 100%;margin-top: 10px;">

        <!-- 序号 -->
        <el-table-column
            label="序号"
            type="index"
            width="70"
            align="center">
        </el-table-column>

        <!-- 岗位名称 -->
        <el-table-column label="岗位名称" prop="name"  align="center" ></el-table-column>

        <!-- 岗位编码 -->
        <el-table-column label="岗位编码" prop="postCode"  align="center"></el-table-column>

        <!-- 状态 -->
        <el-table-column label="状态" prop="status"  align="center" >
            <template scope="scope">
                <el-switch
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color="#dcdfe6"
                    :active-value=1
                    :inactive-value=0
                    @change="updateStatus(scope.row)">
                </el-switch>
            </template>
        </el-table-column>

        <!-- 创建时间 -->
        <el-table-column label="创建时间" prop="createTime"  align="center"></el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作"  align="center">
            <template scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改" :disabled="$hasBP('bnt.sysPost.update')  === false"/>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除" :disabled="$hasBP('bnt.sysPost.remove')  === false" />
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页工具条 -->
    <div class="pagination-container">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>

    <!-- Form -->
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" :width="`${30}%`">
    <el-form :model="postForm" label-width="120px" >
        <el-form-item label="岗位名称" >
            <el-input v-model="postForm.name" placeholder="岗位名称"></el-input>
        </el-form-item>

        <el-form-item label="岗位编码" >
            <el-input v-model="postForm.postCode" placeholder="岗位编码"></el-input>
        </el-form-item>


        <el-form-item label="描述">
            <el-input type="textarea" v-model="postForm.description" :rows="4" placeholder="请输入描述内容"></el-input>
        </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submiForm()">提 交</el-button>
    </div>
    </el-dialog>

  </div>
</template>

<script>
import post_api from '@/api/system/post'
const defaultForm={
    name:'',
    postCode:'',
    description:'',
    status:'1'
}
export default {
data(){
return{
    options: [{
          value: '',
          label: '不选此条件'
        },
        {
          value: '1',
          label: '启用'
        }, {
          value: '0',
          label: '禁用'
        }],
    value: '',
    searchForm: {},
    page: 1,
    limit: 3,
    total: 0,
    postList: [],
    listLoading: true,
    dialogFormTitle: '',
    dialogFormVisible: false,
    postForm: defaultForm
}
},

created(){
    this.showList()
},

methods:{
    //展示数据
    showList(){
        post_api.showList(this.page, this.limit, this.searchForm).then(res =>{
            this.postList=res.data.records
            this.total=res.data.total
            this.listLoading=false
        })
    },

    //重置搜索框数据
    resetData(){
        this.searchForm = {}
        this.showList()
    },

    //添加弹出框
    addPost(){
        this.postForm = Object.assign({}, defaultForm)
        this.dialogFormTitle = '添加岗位'
        this.dialogFormVisible = true
    },

    //弹出编辑框
    edit(id){
        post_api.editPost(id).then(res =>{
            this.dialogFormTitle = '编辑岗位'
            this.dialogFormVisible = true
            this.postForm = res.data
        })
    },


    //改变每页记录数
    handleSizeChange(val) {
        this.limit=val
        this.showList()
      },

    //改变页码
    handleCurrentChange(val) {
        this.page=val
        this.showList();
      },


    //提交表单
    submiForm(){
        if(!this.postForm.id){
            this.savePost()
        }else{
            this.updatePost()
        }
    },

    //提交新增数据
    savePost(){
        post_api.addPost(this.postForm).then(res =>{
            this.$message.success(res.message)
            this.dialogFormVisible = false
            this.showList()
        })
    },

    //提交修改数据
    updatePost(){
        post_api.updatePost(this.postForm).then(res =>{
            this.$message.success(res.message)
            this.dialogFormVisible = false
            this.showList()
        })
    },

    //删除数据
    removeDataById(id){
        this.$confirm('此操作将永久删除该岗位, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            post_api.deletePost(id).then(res =>{
            this.$message.success(res.message);
            this.showList()
        })
        }).catch(() => {

        });
    },

    //改变状态
    updateStatus(row){
        let params ={
            id : row.id,
            status : row.status
        }
        post_api.updatePost(params).then(res =>{
            this.$message.success(res.message)
            this.showList()
        })
    }


}

}
</script>

<style>

.pagination-container {
  text-align: center;
}

.el-pagination {
  display: inline-block;
}
</style>
